<template>
    <div>
        <el-card>
            <el-button @click="LeaveDiaLogvisibleFnSwthch" type="primary">
                申请休假
            </el-button>
            <el-dialog title="休假申请" v-model="LeaveDialogVisible" width="60%" @close="LeaveFormRefClose">
                <el-form ref="LeaveFormRef" :model="LeaveForm" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="LeaveForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="部门">
                        <el-select placeholder="请选择部门" v-model="LeaveForm.departmentname">
                            <el-option v-for="item in departments" :label="item.name" :value="item.name" :key="item.code">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="请假原因">
                        <el-select placeholder="请选择请假原因" v-model="LeaveForm.reason">
                            <el-option v-for="item in reasons" :label="item.name" :value="item.name" :key="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="原因描述">
                        <el-input v-model="LeaveForm.Causedescription"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-date-picker v-model="LeaveForm.timevalue1" type="daterange" range-separator="/"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="LeaveDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="Leaveenterdialog1">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- 请假信息列表 -->
            <el-table :data="LeaveList" style="width:100%">
                <el-table-column label="序号" width="80" type="index" />
                <el-table-column label="名字" prop="name" width="100" />
                <el-table-column label="请假原因" prop="reason" width="100" />
                <el-table-column label="部门" prop="departmentname" width="80" />
                <el-table-column label="时间" prop="timevalue1" width="180" />
                <el-table-column label="描述" prop="Causedescription" width="280" />
                <el-table-column label="操作">
                    <template #default="props">
                        <el-button type="danger" @click="deleteLeaveInfo(props.row)">
                            删除
                        </el-button>
                        <el-button v-if="props.row.leavestatus" type="info">
                            待审批
                        </el-button>
                        <el-button v-if="!props.row.leavestatus" type="primary">
                            审批通过
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import store from '../store';
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { addleaveinfo, delleaveinfo2, findleaveinfo } from "@/api/sys";

onMounted(() => {
    getLeaveList();
})
// 数据分页
// 通过 前端分页规则  结合ajax mongodb的分页操作
const queryInfo = ref({ query: '', pagenum: 1, pagesize: 5, total: 10 })
// 请假的列表信息
const LeaveList = ref([])
const getLeaveList = () => {
    findleaveinfo(queryInfo.value).then((res) => {
        queryInfo.value.total = res.total
        LeaveList.value = res.list
    })
}
const handleSizeChange = (e) => {
    queryInfo.value.pagesize = e
    getLeaveList()
}
const handleCurrentChange = (e) => {
    queryInfo.value.pagenum = e
    getLeaveList()
}



// 删除请假信息
const deleteLeaveInfo = (row) => {
    console.log('row_id', row._id);
    ElMessageBox.confirm("是否删除请假信息?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        delleaveinfo2(row._id).then((res) => {
            if (res.info == 'success') {
                getLeaveList();
            }
        })
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "Delete canceled",
        });
    });
}

// 部门数据列表
// 部门选择
const departments = ref([
    {
        name: "IT部门",
        code: "001",
    },
    {
        name: "设计部门",
        code: "002",
    },
    {
        name: "产品部门",
        code: "003",
    },
    {
        name: "人事部门",
        code: "004",
    },
]);
//  请假原因
const reasons = ref([

    {
        name: "事假",
        code: "001",
    },
    {
        name: "年假",
        code: "002",
    },
    {
        name: "病假",
        code: "003",
    },
    {
        name: "其他",
        code: "004",
    },
]);

getLeaveList()
// 休假填写表单
const LeaveForm = ref({
    name: store.getters.userInfo.data.name,
    departmentname: '',
    reason: '',
    Causedescription: '',
    timevalue1: '',
    mobile: store.getters.userInfo.data.mobile,
})

// 请假确认按钮
const Leaveenterdialog1 = () => {

    // 时间格式
    let time1 = LeaveForm.value.timevalue1[0]; //开始时间
    let datetime1 = time1.getFullYear() + '-' + time1.getMonth() + '-' + time1.getDate()
    let time2 = LeaveForm.value.timevalue1[0]; //结束时间
    let datetime2 = time2.getFullYear() + '-' + time2.getMonth() + '-' + time2.getDate()
    let fulltime = datetime1 + '-' + datetime2
    LeaveForm.value.timevalue1 = fulltime;

    // 给后台传送请假数据
    addleaveinfo(LeaveForm.value).then((res) => {
        console.log("申请请假信息,返回结果", res);
        if (res.info == "success") {
            ElNotification({
                title: "Success",
                message: "添加请假信息成功",
                type: "success",
            })
            getLeaveList(); //添加成功后请求一次
            LeaveDialogVisible.value = false;
            LeaveForm.value.departmentname = '';
            LeaveForm.value.reason = '';
            LeaveForm.value.Causedescription = ''
        }

    })
}

// dialog框的状态
const LeaveDialogVisible = ref(false)
const LeaveDiaLogvisibleFnSwthch = () => {
    LeaveDialogVisible.value = true;
}
const LeaveFormRefClose = () => {
    //模态框关闭后 调用函数
};


</script>
  
<style lang="scss" scoped></style>